Trening Shiny App repopsi

Cilj treninga

• Da se upoznamo sa osnovama Shiny aplikacije

• Da rekreiramo web aplikaciju repopsi

• Da publikujemo aplikaciju koristeći Shinyapps.io

Šta je Shiny web aplikacija?

Shiny je paket RStudio-a koji se koristi za pravljenje interaktivnih web aplikacija uz pomoć R programskog jezika.

Možete da napravite aplikaciju na posebnoj web stranici kao što je slučaj sa repopsi ili da vam bude deo R Markdown dokumenta ili da pravite takozvane Shiny dashboards. Možete takođe da unapredite Shiny aplikaciju uz pomoć CSS tema, htmlwidgets-a, ili JavaScript-a.

Shiny aplikacije se lako kreiraju. Nisu neophodne veštine za izradu web stranica. Ali ukoliko ih imate još bolje.

Napravićemo novi projekat

Napravićemo novi projekat

Napravićemo novi projekat

Otvorićemo Shiny aplikaciju

Izgled Shiny aplikacije

app.R

Kod za Shiny aplikaciju ima tri dela:

1. global kod

• Gde se importuju biblioteke, pristupa izvoru podataka i gde se podaci sredjuju

2. UI kod

• UI (User interface) gde se prilagodjava izgled aplikacije

3. Server kod

• Kod koji pokreće aplikaciju, gde se prava magija dešava

Da vidimo kako izgleda pravljenje shiny aplikacije

Shiny paket i drugi paketi koji su potrebni za izradu aplikacije

Prvo ćemo instalirati shiny paket i ostale pakete koji su neophodni za aplikaciju.

install.packages("shiny") #za shiny aplikaciju

install.packages("shinythemes") # teme koje ulepšavaju izgled aplikacije

install.packages("shinyWidgets") # uredjivanje dugmića ili nekih drugih delova aplikacije

install.packages("tidyverse") # za obradu i pripremanje podataka za vizuelni prikaz

install.packages("DT") # odličan paket za pravljenje tabela

install.packages("gsheet") # koristi se za uvoz google sheets

install.packages("writexl") # koristi se u delu za skidanje podataka u excel formatu

install.packages("httr") # služi za preuzimanje i skidanje podataka u csv-u sa linka 

Shiny paket i drugi paketi koji su potrebni za izradu aplikacije

Potom ćemo uvesti biblioteke koje su nam potrebne

library (shiny)

library (shinythemes)

library (shinyWidgets)

library (tidyverse)

library (gsheet)

library (writexl)

library (httr)

Skinućemo kod originalne aplikacije

Idite na sledeći link.

Global kod

Global deo preuzimanje podataka

Za ovo koristimo gsheet biblioteku

repopsi <- gsheet2tbl("https://docs.google.com/spreadsheets/d/1A6O1d0S7iBYsKVbdBP9AWdYXMWvrN_lCh_oMldCmNsA/edit#gid=0")

Global deo prikaz podataka

Uredjivanje kolona

repopsi <- repopsi[-c(1:8),]

my.names <- repopsi[1,]

colnames(repopsi) <- my.names

repopsi <- repopsi[-1,]

repopsi <- repopsi[,-1]

colnames(repopsi)<-gsub(".$","",colnames(repopsi))

Tabela posle uredjivanja kolona

Važna napomena

• Da bi gsheet2tbl funkcionisao, neophodno je da je “Share by link” uključen.
• Ukoliko promenite google sheet morate da sredite kolone u skladu sa tim.
• Ukoliko želite da koristite excel potreban vam je drugi paket za uvoz tih podataka, a to je readxl::read_xlsx().
• Ako je novi excel fajl, treba proveriti da li treba sredjivati podatke ili ne.

Dodavanje linkova

repopsi1 <-repopsi
# Koristi se za dodavanje linkova na več postojeće informacije u koloni (to je važno za funkciju datatable)

repopsi1$`Source of the original instrument` <- ifelse(is.na(repopsi1$`Source of the original instrument`), 
                                                       
NA, paste0("<a href='", repopsi1$`Source of the original instrument`, "' target='_blank'>",
                           
repopsi1$`Source of the original instrument`, " </a>"))

# Koristi se za pretvaranje u aktivni link za slanje na email adresu u koloni
repopsi1$`Contact email address` <- ifelse(is.na(repopsi1$`Contact email address`  ),
                                                                 
NA, paste0("<a href='mailto:",repopsi1$`Contact email address`  , "' target='_blank'>",
                                                                            
repopsi1$`Contact email address`  ,"</a>"))

Spajanje kolona i uklanjanje nepotrebnih

repopsi1<- repopsi1%>%
  
  unite(`Instrument name and version`, `Title in English`, Abbreviation, Version, sep = " | ",remove = FALSE, na.rm = TRUE)%>%
  
  select(-c(`Title in English`,Abbreviation,Version))%>%
  
  unite(`Contact person`, `Contact person`, `Contact email address`, sep = " | ",remove = FALSE, na.rm = TRUE) %>%
  
  select(-`Contact email address`) %>%
  
  unite(`Where to find the instrument?`, `Instrument availability`, `Link to instrument in the Repository`, `Link to instrument outside of the Repository`, sep = " | ",remove = FALSE,na.rm = TRUE)%>%
  
  select(-c(`Instrument availability`, `Link to instrument in the Repository`, `Link to instrument outside of the Repository`))

Menjanje redosleda kolona

repopsi1<- repopsi1%>%
  
  relocate(`Where to find the instrument?`, .after = `Instrument name and version`) %>%
  
  relocate(`Citation of the original instrument`, .after = `Where to find the instrument?`) %>%
  
  relocate(`Citation of the translation/adaptation`, .after = `Citation of the original instrument`) %>%
  
  relocate(Keywords, .after = `Citation of the translation/adaptation`) %>%
  
  relocate(`Contact person`, .after = Keywords)

Originalna tabela i url za skidanje CSV podataka sa drugog sajta

  #repopsi duplicate for download 

repopsi2 <-repopsi

repopsi2$ID  <-seq.int(nrow(repopsi2))

#URL for CSV download of all data

URL <- "https://osf.io/download/mxrc2/"

UI kod

UI kod

UI se, u slučaju repopsi aplikacije, sastoji od navbarPage koja ima sidebarPanel sa leve i mainPanel sa desne strane.Na ovaj način se uredjuje raspored elemenata aplikacije.

Pre samog sadržaja ovih panela postoji deo koji definiše temu, javaskript koji je važan za global pretragu tabele, css koji uredjuje boje i naslova same aplikacije

Tema i javaskript

Sadržaj myscript.js

www folder

U ovom trenutku bismo pomenuli da www folder postoji da bi se u njega ubacile slike (logoi i slično), ako je kompleksniji css fajl ili javaskript.

Uredjivanje estetike aplikacije

Neke od funkcija

• strong() boldovan tekst

• a(“tekst”/slika, href=“link”) linkovan tekst

• style="" uredjivanje položaja boje slike, teksta i slicno

• h2(),h3(),h4(),h5(), h6() veličina teksta

• br() razmak

• img() slika

• align="" levo, desno, justified, centriran tekst

UI inputs

Najvažniji deo ui predstavljaju takozvani inputi. To su dakle različite vrste opcija gde se unose odredjene komande, podaci, gde će se pojaviti odredjeni grafikon a zatim se na server strani od tih unosa u realnom vremenu prikazuju tabele, grafikoni, skidaju podaci i slično u vidu output-a.

Ovo zapravo jeste najinteresantniji deo aplikacije. Svaki input ima svoj id koji mu vi dodeljujete i jako je važno da zapamtite kako ste ga nazvali.

U side panelu ove aplikacije ima 4 inputa (unos teksta za filtriranje i tri dugmeta za skidanje podataka) a u main panelu jedan (tabela).

UI inputs

sidebarPanel

• tags$input sa id global_filter
• downloadBttn sa id downloadfilterxlsx
• downloadBttn sa id downloadalldatacsv
• downloadBttn sa id downloadalldataxlsx

mainPanel

• dataTableOutput sa id tablerepopsi

Server kod

Korisni linkovi i kontakt

• Shiny tutorijal
• Galerija Shiny aplikacija
• R-ladies Belgrade meetup stranica
• Kontakt Duško Medić i Tijana Blagojev

Hvala mnogo na pažnji!